<template>
  <div class="cart">
      <h2>你的购物车</h2>
      <ul>
          <li v-for="product in products" :key="product.id">
              {{ product.title }} - {{ product.price }} x {{ product.quantity }}
          </li>
      </ul>
      <p>总价: {{total}}</p>
      <p><button :disabled="!products.length" @click="checkout(products)">结账</button></p>
      <p v-show="checkoutStatus">结账 {{ checkoutStatus }}.</p>
  </div>
</template>
<script>
export default {
  computed: {
      products(){
          return this.$store.getters.cartProducts
      },
      total(){
          return this.$store.getters.cartTotalPrice
      },
      checkoutStatus(){
          return this.$store.getters.checkoutStatus
      }
  },
  methods: {
      checkout(products){
          this.$store.dispatch('checkout', products)
      }
  }
}
</script>
